iT邦幫忙

javascript相關文章
共有 5877 則文章

My Project 為什麼有些網站要加入切換分頁後影片暫停功能

你可能遇到過這樣的情況:影片正在播放,你打開另一個分頁查資料,聲音突然停了;切回影片頁面,播放又恢復了。 有時甚至不用切換分頁,只要點擊其他視窗,或者把瀏覽器最...

My Project Day 6|將 /add 指令模組化,拆分 index.js

一、今天的學習目標將add的功能從index.js裡面拉出來,並創一個獨立的檔案放add.js處理 /add 指令,這種把不同功能拆分到不同檔案中管理的方式,通...

My Project Day 08:拆分獨立檔案與 SPA 單頁式架構的抉擇

隨著專案功能越來越多,如果所有的程式碼全都擠在同一個檔案裡,不僅程式碼會變得超長,維護起來也十分頭痛。因此,今天的核心任務有兩個: 模組化大掃除:把原本單一檔...

My Project Day 5:驗證並解析日期與時間輸入

一、今天的學習目標延續昨天取得 /add 指令中 title、date、time 三個輸入值的功能,今天開始處理使用者輸入的日期與時間的格式是否有符合要求。我希...

My Project Day 4|讀取 /add 指令中的 title、date、time

一、今天的學習目標今天主要是修改index.js這份檔案。昨天我已經完成 /add 指令的輸入介面,讓使用者可以在 Discord 中輸入三個資料: titl...

My Project Day 07:儀表板「今日與本月支出」即時計算

在前面幾天,我們完成了新增、刪除、localStorage 資料持久化,以及精美的分類色彩標籤。不過,畫面最上方的總覽看板(今日支出、本月已花費)一直都還是寫死...

My Project Day 06: localStorage 資料持久化與分類色彩標籤

今日學習目標 在前幾天,我們雖然讓網頁學會了新增與刪除,但最大的痛點就是,只要一按重新整理,之前的記帳就全部蒸發了T^T。今天我們會將資料持久化 (localS...

鐵人賽 JavaScript DAY 25

技術 Day 25|Uint8Array 不是 Array:從 ArrayBuffer 看 bytes 的共用、複製與移交

摘要 Uint8Array 這類 TypedArray 名字裡有 Array,卻不是一般 Array;它不是自己保存一串數字,而是用某種數值型別「觀看」一段 A...

My Project Day 05:刪除功能與分類色彩標籤

在前面幾天完成新增支出的功能後,我們的網頁還欠缺兩大功能:1. 刪除:手殘打錯金額時,能隨時把錯誤資料清除。2. 分類色彩標籤:讓不同的消費類別擁有專屬的顏色,...

鐵人賽 JavaScript DAY 24

技術 Day 24|關於深拷貝這件事:structuredClone、序列化與資料邊界

摘要 深拷貝不只是一層層往下複製。structuredClone() 先把資料序列化成一份記錄,再重建出全新的資料;它保留 Date、Map 等型別與資料內部的...

技術 Web API | 讓網頁自動倒數與定時執行:setInterval() 使用指南

相信大家對於這樣的圖片輪播(Carousel)效果一定不陌生,幾乎在各大網站的首頁都能看到。 像這樣 「每隔固定時間自動切換下一張照片」 或是 「定時重複執行...

鐵人賽 JavaScript DAY 23

技術 Day 23|Array 明明只是排序,為什麼原始資料被改掉了?

摘要 ES2023 的 toSorted()、toReversed()、toSpliced()、with() 讓常見 Array 操作能回傳新 Array,避免...

技術 JS 內建物件 | 無條件捨去的小幫手:Math.floor() 使用指南

在處理資料時,經常會遇到帶有小數點的數字,例如: 計算購物車折扣後,價格出現了小數點(例如:$199.8)。 製作隨機抽獎時,算出了一個隨機小數。...

鐵人賽 Software Development DAY 18

技術 Day 18:案例——100% 覆蓋率,但測試對重構完全沒有防護力

前言:覆蓋率報告顯示 100%,這不是應該最安心的狀態嗎? 「這個模組的覆蓋率報告顯示 100%,代表每一行、每一個分支都被測試跑過,重構起來應該很放心吧?」...

鐵人賽 JavaScript DAY 22

技術 Day 22|Set 如何找出唯一值?從去重規則到集合運算

摘要 為什麼內容一樣的物件,放進 Set 卻不會被去重?先弄懂 Set 判斷「一樣」的規則,再用 ES2025 的集合運算,一行比出交集資料間少了什麼、篩選條件...

My Project Day 04:實作「新增消費紀錄」的互動表單介面

今日學習目標 • 實作動態修改金庫名稱的互動功能(讓使用者自訂專屬名稱)• 抓取右側快速記帳表單的 DOM 元素• 「新增支出」按鈕的點擊事件• 實現不用重...

技術 JavaScript | 乍看是貓,但其實不是我們說的那個貓?「真正的陣列(Array)」與「類陣列(Array-like Object)」差在哪?

先來看看兔猻的照片,雖然廣義上牠是貓科動物,但狹義來說牠跟家貓是不同屬的(家貓是 Felis(貓屬);兔猻則是 Otocolobus(兔猻屬 )。 (圖片來源...

技術 JS DOM | 選取多個元素時的集合:NodeList vs HTMLCollection 有何不同?

當我們選取「多個」元素時(例如用 querySelectorAll 或 getElementsByTagName),JavaScript 回傳給我們的並不是真正...

技術 JS DOM | 取得元素的方法:querySelector、querySelectorAll 與傳統選擇器

在 介紹DOM是什麼 時,提到如果把整個網頁比喻成一隻貓,DOM 就是貓身上的各個部位與神經反射。 既然現在我們已經有了貓了!接下來——當然就是選擇部位要來擼貓...

技術 JS 內建物件 | 字串前補零與對齊:String.prototype.padStart() 使用指南

為什麼需要字串補零? 在開發網頁時,我們經常會遇到需要格式化文字的情境: 製作計時器或電子鐘時,希望把 9 秒顯示成 09 秒。 顯示訂單編號時,希望將...

鐵人賽 JavaScript DAY 21

技術 Day 21|Object.groupBy:把扁平資料分組成前端可用的結構

摘要 介紹 ES2024 Object.groupBy() 如何將 iterable 分組成前端可用的結構,並釐清它與 Map.groupBy() 的 key...

My Project Day 03:側邊欄導覽與主控台骨架

在前兩天,我們確立了「大學生記帳與消費分析網站」的完整藍圖,也把開發環境跟專案根目錄都安頓好了。不過老實說,打開昨天的畫面,真的看起來也太廢廢了吧,所以我們今天...

My Project Day 3|建立 /add 指令,加入行程輸入欄位

一、今天的學習目標 今天的目標是加入三、建立 /add 指令新的slash command:/add 並加入 title、date、time 三個輸入欄位 將...

My Project Day 02:開發環境建置與前端網頁初始化

昨天我們確認了「大學生記帳與消費分析網站」的完整構想與基本的技術藍圖。今天的核心任務是把開發環境架設好,並建立專案的第一個網頁骨架。 今天下載了什麼? V...

鐵人賽 JavaScript DAY 20

技術 Day 20|Object、Map、Set:那些以前忽略的資料模型規則

摘要: 從 key、相等判斷與迭代順序切入,建立 Object、Map、Set 三種資料模型的選擇準則。 前置知識:會使用 Object、Array 與基本...

技術 JavaScript 基礎概念 | 什麼是 DOM ?如果網頁是一隻貓

如果網頁是一隻貓🐱 如果把整個網頁比喻成一隻貓,DOM 就是貓身上的各個部位與神經反射。可以透過與特定部位互動,觸發不同的反應: 拍拍貓屁股:觸發「發出呼嚕...

技術 Minute 10 : Side Project如何用原生 Canvas 實現動態粒子系統與異步回能遊戲機制

用純 JS 刻出童年回憶!工程師打造「火柴人奧義對決」網頁版你還記得小時候在學校電腦課,偷偷在畫面上畫火柴人決鬥的感動嗎?近日,一位熱血的前端工程師將這份童年情...

鐵人賽 JavaScript DAY 19

技術 Day 19|從一個未來結果到一串未來資料:非同步資料流學習回顧

摘要: 用「工作何時開始、結果如何交付、錯誤往哪裡走、誰能停止工作」四個問題,分清 Promise 的一次 settlement、Async Iterator...

鐵人賽 Software Development DAY 14

技術 Day 14:案例——一個被過度 mock 掉的測試,通過了但沒抓到真正的 bug

前言:測試綠燈、CI 綠燈,為什麼上線還是炸了? 「這支測試把外部依賴都 mock 掉了,應該很單純、很穩定吧?」 昨天談到 AI 傾向把待測物件依賴的每一個東...

鐵人賽 JavaScript DAY 30

技術 最後一天 : bun 源碼分析,以及參考資源以及心得

前言 終於來到系列文的最後一天。這篇文章想做兩件事:第一,帶大家實際鑽進 oven-sh/bun 的原始碼庫,看看這個「號稱最快的 JavaScript 執行...